<template>
    <div>
        <el-form :model="form" label-width="120px">
            <el-form-item label="标题">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="说明">
                <el-input v-model="form.digest" />
            </el-form-item>
            <el-form-item :span="3" label="来源">
                <el-input v-model="form.source" />
            </el-form-item>
            <el-form-item label="发布时间">
                <el-col :span="11">
                    <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
                </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                    <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
                </el-col>
            </el-form-item>

            <el-form-item label="分类">
                <el-radio-group v-model="form.class_id">
                    <el-radio v-for="item in kind.list" :label="item" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否热门">
                <el-radio-group v-model="form.hot">
                    <el-radio label="是" />
                    <el-radio label="否" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="新闻内容">
                <el-input v-model="form.content" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">发布新闻</el-button>
                <el-button @click="onEmpty">清空重写</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ElMessage } from "element-plus";

import moment from "moment";
import { ref, reactive } from "vue";
import { ElButton } from "element-plus";
import { addNews } from "../api";
const form = reactive({
    digest: "",
    source: "",
    date1: "",
    date2: "",
    class_id: "",
    hot: "",
    content: "",
    title: "",
});
const kind = reactive({ list: ["冲浪榜", "本地榜", "军事榜", "娱乐榜", "亲子榜", "体育榜"] });
const onSubmit = () => {
    let { title, digest, source, class_id, hot, content, date1, date2 } = form;
    let date = moment(date1).format("YYYY-MM-DD") + " " + moment(date2).format("hh:mm:ss");
    console.log(digest, source, class_id, hot, content, date);
    let kindIndex = kind.list.findIndex((item) => {
        return item == class_id;
    });
    let hotFlat;
    if (hot == "是") {
        hotFlat = 1;
    } else {
        hotFlat = 0;
    }
    addNews({ title, source, digest, content, create_time: date, class_id: kindIndex, hot: hotFlat }).then((data) => {
        console.log(data);
        if (data.code == 200) {
            ElMessage({
                message: data.msg,
                type: "success",
            });
        } else {
            ElMessage({
                message: data.msg,
                type: "warning",
            });
        }
        form.digest = "";
        form.source = "";
        form.date1 = "";
        form.date2 = "";
        form.class_id = "";
        form.hot = "";
        form.content = "";
        form.title = "";
    });
    // console.log(kindIndex, "class_id");
};
const onEmpty = () => {
    form.digest = "";
    form.source = "";
    form.date1 = "";
    form.date2 = "";
    form.class_id = "";
    form.hot = "";
    form.content = "";
    form.title = "";
};
</script>
<style lang="scss">
.el-upload-dragger {
    margin-bottom: 20px;
    padding-top: 0px;
    padding-bottom: 0px;

    div {
        padding: 0 !important;
        margin: 0 !important;
    }
}

.demo-ruleForm {
    ::v-deep .el-picker-panel__body {
        z-index: 100000000000;
        background-color: #ccc;
    }
}
</style>
